<template>
  <div class="detail">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane :lazy="true" :label="item.name" :name="item.id" v-for="(item, index) in navList" :key="index">
        <component :is="item.component" v-if="activeName == item.id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, provide } from "vue";
import { useRoute } from "vue-router";
import type { TabsPaneContext } from "element-plus";
import Summary from "./content/Summary/index.vue";
import Detail from "./content/Detail/index.vue";
// import Scheme from "./content/scheme.vue";
// import Task from "./content/Task/index.vue";
import Daily from "./content/Daily/index.vue";
import Answer from "./content/Answer/index.vue";
import Annex from "./content/Annex/index.vue";

const route = useRoute();
const activeName = ref(1);
const navList = reactive([
  {
    name: "项目概要",
    id: 1,
    component: Summary
  },
  {
    name: "项目进度",
    id: 2,
    component: Detail
  },
  // {
  //   name: "任务管理",
  //   id: 3,
  //   component: Task
  // },
  {
    name: "项目日报",
    id: 4,
    component: Daily
  },
  {
    name: "项目问题",
    id: 5,
    component: Answer
  },
  // {
  //   name: "项目文档",
  //   id: 6
  // },
  {
    name: "项目附件",
    id: 7,
    component: Annex
  }
]);
// 注入
provide("projectId", route.query.id);

const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name;
  console.log(tab, event);
};

onMounted(() => {});
</script>
<style lang="scss">
.detail {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  height: 100%;
  .el-tabs {
    display: flex;
    flex: 1;

    // flex-flow: column nowrap;
    height: 0;
    .el-tabs__header {
      box-sizing: border-box;
      display: flex;
      flex: 0 0 72px;
      align-items: center;
      margin: 0 0 10px;

      // width: 100%;

      // padding-left: 38px;
      background: #ffffff;
      .el-tabs__nav-scroll {
        // height: 100%;
      }
      .el-tabs__nav-wrap {
        display: flex;
        align-items: center;

        // width: 100%;
        height: 100%;
        &::after {
          display: none;
        }
      }
      .el-tabs__nav {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        .el-tabs__item {
          padding: 0 19px;
          &:nth-child(2) {
            padding-right: 19px;
            padding-left: 38px;
          }
          &:last-child {
            padding-right: 38px;
          }

          font-size: 16px;
        }
      }
    }
  }
  .el-tabs__content {
    flex: 1;
    height: 0;
  }
  .el-scrollbar__view {
    flex: 1;
    height: 100%;
  }
  .el-tab-pane {
    height: 100%;
  }
  .print {
    position: absolute;
    top: 16px;
    right: 20px;
    padding: 10px;
    color: #ffffff;
    cursor: pointer;
    background: $primary-color;
    border-radius: 20px;
  }
}
</style>
